//
// Component: Panel
//
// ========================================================================


// Variables
// ========================================================================

@panel-title-margin-bottom:                     @global-margin;
@panel-title-font-size:                         round((@global-font-size * 1.28)); // 18px / 20px
@panel-title-line-height:                       round((@panel-title-font-size * 1.32)); // 24px / 26px
@panel-title-color:                             @global-color;

@panel-box-padding:                             @global-margin;
@panel-box-color:                               @global-color;
@panel-box-title-color:                         @global-color;
@panel-box-background:                          @global-background;

@panel-hover-padding:                           @global-margin;
@panel-hover-color:                             @global-color;
@panel-hover-hover-color:                       @global-color;

@panel-header-title-border:                     @global-border;
@panel-header-title-color:                      @global-color;

@panel-divider-gutter:                          @global-grid-gutter;
@panel-divider-gutter-large:                    @global-grid-gutter-large;
@panel-divider-border:                          @global-border;

@panel-box-secondary-background:                #f9f9f9;

// Sub-object: `uk-panel-title`
// ========================================================================

.hook-panel-title() {}


// Sub-object: `uk-panel-badge`
// ========================================================================

.hook-panel-badge() {}


// Modifier: `uk-panel-box`
// ========================================================================

.hook-panel-box() {
    border-radius: @global-border-radius;
}

.hook-panel-box-hover() {}

//
// Sub-modifier: `uk-panel-box-primary`
//

.hook-panel-box-primary() {}

.hook-panel-box-primary-hover() {}

//
// Sub-modifier: `uk-panel-box-secondary`
//

.hook-panel-box-secondary() {}

.hook-panel-box-secondary-hover() {}


// Modifier: `uk-panel-hover`
// ========================================================================

.hook-panel-hover() {}

.hook-panel-hover-hover() {}


// Modifier: `uk-panel-header`
// ========================================================================

.hook-panel-header() {}


// Miscellaneous
// ========================================================================

.hook-panel-misc() {

    .uk-panel-box-trans {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .uk-panel-card {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.22);
    }

    .uk-panel-card .uk-panel-card {
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.08);
    }

    .uk-panel-card-hover {
        transition: box-shadow 200ms;
    }

    .uk-panel-card-hover:hover {
        box-shadow: 0 25px 80px rgba(0,0,0,0.12), 0 3px 12px rgba(0,0,0,0.05);
        z-index: 1;
    }

    .uk-panel-framed {
        display: block;
        border: 1px @global-border solid;
        border-radius: @global-border-radius;
        padding: @panel-box-padding;
    }

    .uk-panel-box-header {
        padding: @panel-box-padding;
        margin: (-1 * @global-margin) (-1 * @global-margin) @global-margin (-1 * @global-margin);
        border-bottom: 1px  @global-border dotted;
    }

    .uk-panel-box-header-title {
        text-transform: uppercase;
        font-size: 85%;
    }

    .uk-panel-space .uk-panel-box-header {
        padding: @panel-space-padding;
        margin: (-1 *  @panel-space-padding) (-1 *  @panel-space-padding)  @panel-space-padding (-1 *  @panel-space-padding);
    }

    .uk-panel-box-footer {
        padding: @panel-box-padding;
        margin: @global-margin (-1 * @global-margin) (-1 * @global-margin) (-1 * @global-margin);
        border-top: 1px  @global-border solid;
    }

    .uk-panel-space .uk-panel-box-footer {
        padding: @panel-space-padding;
        margin: @panel-space-padding (-1 * @panel-space-padding) (-1 * @panel-space-padding) (-1 * @panel-space-padding);
    }

    .uk-panel-thumbnail {
        padding: 5px 5px 25px 5px;
    }
}
